<template>
    <div class="main">
		<img src="../../assets/img/backicon.png" @click="back" class="backbtn" alt="">
        <h1>修改密码</h1>


		<h3>修改密码</h3>
		<div class="phones">
			<img class="phone-icon" :src="locak" alt="">
			<div class="phone-input">
				<input type="password" placeholder=" 原密码" v-model="oldpassword"/>
				<van-icon name="clear" size="16" color="#ccc" style="float:right;margin-top: 7px;" v-if="oldpassword.length>0" @click="oldpassword=''"/>
			</div>
		</div>

		<div class="pwd">
			<img class="phone-icon-kb" :src="keyboard" alt="">
			<div class="phone-input">
				<input type="password" v-model="newpwd" placeholder=" 新密码" @blur=""/>
				<van-icon name="clear" size="16" color="#ccc" style="float:right;margin-top: 7px;" v-if="newpwd.length>0" @click="newpwd=''"/>
			</div>
		</div>

        <div class="pwd">
			<img class="phone-icon" :src="locked" alt="">
			<div class="phone-input">
				<input type="password" v-model="confirmnewpwd" placeholder=" 确认新密码"/>
				<van-icon name="clear" size="16" color="#ccc" style="float:right;margin-top: 7px;" v-if="confirmnewpwd.length>0" @click="confirmnewpwd=''"/>
			</div>
		</div>
        <span class="password-info">密码包含6-12位的数字和字符</span>
        <div class="bottom-btn">
            <img class="regbtn" :src="canToReg?regbtn:unregbtn" alt="" @click="update">
        </div>
		

	</div>
</template>
<script>
import { _ajaxeditpassword } from '../../service/user.js'
export default {
    data(){
        return{
            locak:require('../../assets/img/unlocked.png'),
			keyboard:require('../../assets/img/keyboard.png'),
			locked:require('../../assets/img/lock.png'),

			canToReg:false,
			regbtn:require('../../assets/img/updatepwdconfirmed.png'),
			unregbtn:require('../../assets/img/updatepwdconfirm.png'),

			oldpassword:"",
            newpwd:"",
            confirmnewpwd:"",
        }
	},
	watch:{
		confirmnewpwd(){
			this.canToReg=false
			if(this.newpwd==this.confirmnewpwd){
				this.canToReg=true
			}
		}
	},
	activated(){
		this.oldpassword=""
        this.newpwd=""
        this.confirmnewpwd=""
	},
    methods:{
		back(){
			this.$router.push("/UserSetting")
		},
		valipwdrule(val){
            // 6-12位
            if(val.length<6 || val.length>12){
                this.$toast.fail("密码请输入6~12个字符",)
                return false
            }else if(val.length==0){
                this.$toast.fail("密码不能为空")
                return false
            }else if(/^\d+$/.test(val))
            {
                this.$toast.fail("请输入数字和字母")
                return false
            }else if(/^[a-z]+$/i.test(val))
            {
                this.$toast.fail("请输入数字和字母")
                return false
            }else if(!/^[A-Za-z0-9]+$/.test(val))
            {
                this.$toast.fail("只能含有数字和字母")
                return false
            }
            return true
		},
		valinew(){
			this.valipwdrule(this.newpwd)
		},
		update(){
			let _this=this
			if(!this.valipwdrule(this.newpwd)){
				return
			}
			if(this.confirmnewpwd!=this.newpwd){
				this.$toast.fail("确认密码与新密码不同")
				return
			}
			let uid=JSON.parse(localStorage.getItem("user")).user_id
			_ajaxeditpassword({
				user_id:uid,
				oldpassword:this.oldpassword,
				password:this.newpwd,
				repassword:this.confirmnewpwd
			}).then(res=>{
				_this.$toast(res.message)
				if(res.errcode==1){
					_this.$router.push('/login')
				}
			})
		}
    }
}
</script>
<style scoped>
    .main{
		height: 100%;
		width: 100%;
		padding-top: 100px;
    }
    .main>h1{
		font-family: "PingFang SC","Microsoft YaHei";
		font-weight: 1000;
        font-size: 18px;
        position: absolute;
        top: 25px;
        left: 139px;
    }
	.main>h3{
		font-family: "PingFang SC","Microsoft YaHei";
		font-weight: bold;
		font-size: 16px;
		margin: 0 0 0 67px;
		color: #000;
		font-weight: blod;
	}
	.phones{
		width: 100%;
		height: 32px;
		margin-top: 35px;

	}
	.pwd{
		width: 100%;
		height: 32px;
		margin-top: 26px;

	}
	.phone-icon{
		width: 12px;
		margin: 0 16px 5px 74px;
		display: inline-block;
		line-height: 32px;
	}
	.phone-icon-kb{
		width: 17px;
		margin: 0 14px 5px 71px;
		display: inline-block;
		line-height: 32px;
	}
	input{
		background:none;  
		outline:none;  
		border:none;
		height: 40px;
		line-height: 40px;
		font-family: "DINPro-Bold";
		font-size: 16px;
		color: #000;
		caret-color:#000;
	}
	.backbtn{
		width: 9px;
		position: absolute;
		top: 30px;
		left: 18px;
	}
	.phone-input{
		display: inline-block;
		height: 40px;
		width: 205px;
		border-bottom: 1px solid #efefef;
	}

	::-webkit-input-placeholder { /* WebKit browsers */
		color: rgb(204, 204, 204);
		font-size: 13px;
		font-family: "PingFang SC","Microsoft YaHei";
		font-weight: bold;
		line-height: 33px;
	}

	::-moz-placeholder { /* Mozilla Firefox 19+ */
		color: rgb(204, 204, 204);
		font-size: 13px;
		font-family: "PingFang SC","Microsoft YaHei";
		font-weight: bold;
		line-height: 33px;
	}

	:-ms-input-placeholder { /* Internet Explorer 10+ */
		color: rgb(204, 204, 204);
		font-size: 13px;
		font-family: "PingFang SC","Microsoft YaHei";
		font-weight: bold;
		line-height: 33px;
	}  

    .password-info{
        display: block;
        width: 100%;
		font-family: "PingFang SC","Microsoft YaHei";
		font-weight: bold;
        font-size: 12px;
        color: #ccc;
        margin: 30px 0 0 105px;
    }
	.regbtn{
		display: block;
        width: 340px;
        margin: 0 auto;
	}
	.more{
		width: 100%;
		font-family: "PingFang SC","Microsoft YaHei";
		font-weight: bold;
		font-size: 13px;
		color: #ccc;
	}
	.more p{
		text-align: center;
	}
	.more span:nth-child(1){
		display: inline-block;
		color: #333;
		margin-left: 4px;
	}


	.valibtn{
		display: inline-block;
		width: 80px;
		height: 30px;
		line-height: 30px;
		margin-bottom: 6px;
		background-color: #f5f5f5;
		float: right;
		color: #666;
		font-size: 10px;
		font-family: "PingFang SC","Microsoft YaHei";
	}


	
	@media (max-height: 812px) {
		.bottom-btn{
			width: 100%;
			display: block;
			margin: 40vh auto 0 auto;
		}
	}
	@media (max-height: 670px) {
		.bottom-btn{
			width: 100%;
			display: block;
			margin: 26vh auto 0 auto;
		}
	}
</style>